<template>
	<view>
		<scroll-view :style="{height: (wh-140) + 'px'}" scroll-y refresher-enabled="true"
			:refresher-triggered="triggered" @refresherrefresh="doRefresher" lower-threshold="100"
			@scrolltolower="doScroll">
			<view class="orderlist-box" v-for="(item,index) in orderList " :key="index">
				<view class=" item-title">
					<view class="item-title-left">{{item.status}}</view>
					<view class="item-title-right" @click="ToOrderDe(item)">订单详情
						<u-icon name="arrow-right" size="22rpx"></u-icon>
					</view>
				</view>
				<view class="titles">订单{{item.status}}</view>
				<view class="item-info">
					<view class="item-info-left">
						<text>订单编号:</text>
						<text>服务内容:</text>
						<text>服务师傅:</text>
						<text>接单时间:</text>
					</view>
					<view class="item-info-right">
						<view>{{ item.order_no }}<button size="mini" class="btn" @click="doCopy(index)">复制</button>
						</view>
						<view>{{ item.product_detail }}</view>
						<view>{{ item.technician }}<button size="mini" class="btn" @click="doCall(index)">联系师傅</button>
						</view>
						<view>{{ item.receiving_time2 }}</view>
					</view>
				</view>
				<view class="btn-box" v-if="item.status == '已完成'">
					<button class="btnone" v-if="item.is_toushu == 0" @click="ToComplaint(item)">投诉</button>
					<button class="btntwo" @click="ToEvaluate(item)">评价</button>
				</view>
				<view class="btn-box" v-if="item.status == '待付款'">
					<button class="btntwo" @click="ToConfirm(item)">去付款</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "OrderList",
		props: ['orderList', 'odtol'],
		data() {
			return {
				triggered: false,
				page: 1,
				orderLists: [],
				wh: ''

			}
		},
		created() {
			// 获取页面可操作高度
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight
			console.log(this.wh, '=========');
		},
		methods: {
			ToConfirm(item) {
				uni.navigateTo({
					url: `/pages/Order/OrderDe?id=${item.id}&status=${item.status}`
				})
			},
			doCopy(index) {
				uni.setClipboardData({
					data: this.orderList[index].order_no,
					success: (res) => {
						uni.$showMsg('您已复制成功!')
					}
				})
			},
			doCall(index) {
				uni.makePhoneCall({
					phoneNumber: this.orderList[index].technician_tel,
					success: (res) => {

					},
					fail: (res) => {
						uni.$showMsg('您已取消拨打!')
					}
				});
			},
			ToEvaluate(item) {
				uni.navigateTo({
					url: `/pages/Order/Evaluate?id=${item.id}`
				})
			},
			ToComplaint(item) {
				uni.navigateTo({
					url: `/pages/Order/Complaint?id=${item.id}`
				})
			},
			// 上拉加载
			doScroll() {
				// 页数乘以每页条数
				if (this.page * 10 >= this.odtol.total) return uni.$showMsg('暂无更多数据!')
				if (this.odtol.isLoadAll) return
				// 让页面加1
				this.page++
				this.$emit('changepage', this.page)
				// 重新获取列表数据
				this.$parent.getOrderList()
			},
			// 下拉刷新
			doRefresher() {
				this.page = 1
				this.$emit('changepage', this.page, this.orderLists)
				this.triggered = true
				// 重新获取列表数据
				this.$parent.getOrderList()
				setTimeout(() => {
					this.triggered = false;
				}, 1000)

			},
			ToOrderDe(item) {
				uni.navigateTo({
					url: `/pages/Order/OrderDe?id=${item.id}&status=${item.status}&endtime=${item.end_time}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderlist-box {
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		font-size: 26rpx;

		.item-title {
			display: flex;
			justify-content: space-between;

			.item-title-left {
				font-size: 34rpx;
				font-weight: 700;
			}
		}

		.titles {
			color: #969696;
			margin: 13rpx 0 42rpx;
		}

		.item-info {
			display: flex;
			height: 200rpx;

			.item-info-left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				color: #969696;
				margin: 0 80rpx 0 20rpx;
			}

			.item-info-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;



				.btn {
					margin-left: 60rpx;
					padding: 0 15rpx;
					font-size: 22rpx;
					border-radius: 30rpx;
					height: 37rpx;
					line-height: 30rpx;
					vertical-align: text-top;
					border: 0;
					border: #E0E0E0 1px solid;
				}

				button.btn::after {
					display: none;
					border: none;
				}
			}
		}

		.btn-box {
			display: flex;
			justify-content: flex-end;
			margin-top: 32rpx;

			.btnone,
			.btntwo {
				width: 144rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				border-radius: 50rpx;
				font-size: 26rpx;
				margin: 0;


			}

			.btnone {
				background-color: #fcfcfc;
				border: 0;
				border: 1px solid #E0E0E0;

			}

			button.btnone::after {
				display: none;
				border: none;
			}

			.btntwo {
				background-color: #01C3A8;
				color: #fff;
				margin-left: 32rpx;
			}

			button.btntwo::after {
				display: none;
				border: none;
			}
		}
	}
</style>
